<template>
<view>
<view class="pay-warp">
  <view class="pay">
    <view class="code">
      <text>订单号：{{tuikuanList.order_sn}}</text>
    </view>
    <view class="unpaid fr">
      <!-- <text>编辑</text> -->
    </view>
  </view>
  <view v-for="(item, index) in tuikuanList.item" :key="index" class="goods-list">
    <view class="list-pic fl">
      <image :src="item.pic"></image>
    </view>
    <view class="list-tit fr">
      <text>{{item.name}}</text>
    </view>
  </view>
</view>
<view class="r-warp">
  <view class="r-cause">
    <picker @change="bindCauseChanges" :value="index" :range="causes">
      退换货类型
      <view class="fr r-choice">
        <view @tap="causeLists" class="r-title">{{choices}}</view>
        <image src="/static/remao_shop/img/arrow_icon.png"></image>
      </view>
    </picker>
  </view>
</view>
<view class="r-warp" v-if="show">
  <view class="r-cause">
    <picker @change="bindCauseChange" :value="index" :range="cause">
      退款原因
      <view class="fr r-choice">
        <view @tap="causeList" class="r-title">{{choice}}</view>
        <image src="/static/remao_shop/img/arrow_icon.png"></image>
      </view>
    </picker>
  </view>
</view>
<view class="r-warp" v-if="show">
  <view class="r-cause">
    退款金额：
    <text>￥{{tuikuanList.order_amount}}</text>
  </view>
</view>
<view class="r-warp">
  <view class="r-cause">
    <view>{{shuoming}}</view>
    <textarea type="text" @input="explainFun" maxlength="-1" placeholder-class="place-holder" :placeholder="'请输入' + shuoming"></textarea>
  </view>
  <!-- <view class='r-photo'>
    <view class='camera'>
    <view>
      <image src='../../img/camera_icon.png'></image>
      <text>添加照片</text>
    </view>
    </view>
  </view> -->
  <view class="images">
			<view v-for="(item, index) in images" :key="index" class="img">
				<image v-if="item.isshow == '0'" class="lefttop" src="/static/remao_shop/img/tuichu.png" mode :data-index="index" @tap="dele"></image>
				<view class v-if="item.isshow == '1'" :data-index="index" @tap="album">
					<image class="back" src="/static/remao_shop/img/camera_icon.png" mode></image>
					<view class>
						添加图片
					</view>
				</view>
				<image class="imageidx" v-if="item.isshow == '0'" :src="item.avatar" mode="aspectFit" :data-index="index" @tap="yulan"></image>
			</view>
  </view>
  </view>
<view class="submit" @tap="submit">
  <text>提交</text>
</view>
</view>
</template>

<script>
import api from "../../../api";
var app = getApp();

export default {
  data() {
    return {
      choice: "请选择",
      choices: "请选择",
      causes: ['换货', '退货'],
      return_type: '',
      cause: [],
      yyid: [],
      yyids: '',
      order_sn: '',
      userId: '',
      take_status: 0,
      tuikuanList: [],
      explain: '',
      image: [],
      images: [{
        avatar: '',
        isshow: '1',
        imgurl: ''
      }],
      imgs: [],
      show: true,
      shuoming: '退款说明'
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    this.setData({
      order_sn: options.order_sn,
      userId: options.uid
    });
    console.log(this.describe);
    this.getlist();
    this.causeList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    bindCauseChange: function (e) {
      console.log(e.detail.value);
      this.setData({
        choice: this.cause[e.detail.value],
        yyids: this.yyid[e.detail.value]
      });
    },
    bindCauseChanges: function (e) {
      this.setData({
        choices: this.causes[e.detail.value]
      });
      console.log(e.detail.value);

      if (e.detail.value == 0) {
        this.setData({
          return_type: 1,
          show: false,
          shuoming: '换货说明'
        });
      } else if (e.detail.value == 1) {
        this.setData({
          return_type: 2,
          show: true,
          shuoming: '退款说明'
        });
      }
    },

    // 加载数据
    getlist() {
      let that = this;
      app.globalData.request({
        url: api.fyz.orderDetail,
        data: {
          order_sn: that.order_sn,
          uid: that.userId
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: res => {
          console.log(res);
          that.setData({
            tuikuanList: res
          });

          if (res.status == 6) {
            that.setData({
              take_status: 0
            });
          } else if (res.status == 8 || res.status == 4) {
            that.setData({
              take_status: 1
            });
          }
        }
      });
    },

    //获取退款原因
    causeList: function () {
      let that = this;
      app.globalData.request({
        url: api.default.order_reason,
        data: {},
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: res => {
          console.log(res);
          let yuanyin = [],
              yyid = [];

          for (let i = 0; i < res.list.length; i++) {
            yuanyin.push(res.list[i].title);
            yyid.push(res.list[i].reason_id);
          }

          console.log(yuanyin);
          that.setData({
            cause: yuanyin,
            yyid: yyid
          });
        }
      });
    },

    //上传图片
    album(e) {
      console.log(e);
      var that = this;
      var index = e.currentTarget.dataset.index;

      if (that.images[index].isshow == '0') {} else {
        wx.chooseImage({
          count: 10 - that.images.length,

          success(res) {
            var images = that.images;
            console.log(res.tempFilePaths);

            for (let i = 0; i < res.tempFilePaths.length; i++) {
              // let isshow = that.data.images[index + i].isshow
              console.log('images', images);
              images[index + i].isshow = '0';
              that.setData({
                images: images
              });
              console.log(that.images[index + i].isshow); // console.log(res)

              const tempFilePaths = res.tempFilePaths;
              wx.uploadFile({
                url: api.default.wq_uplode_img,
                filePath: tempFilePaths[i],
                name: 'file',
                header: {
                  "Content-Type": "multipart/form-data"
                },
                success: function (res) {
                  console.log(res, 2); //  var data = JSON.parse(res.data);
                  // var data = res.data;
                  // console.log(data)
                  // images[index + i].avatar = data.full_url
                  // images[index + i].imgurl = data.imgurl

                  images[index + i].avatar = res.data;
                  that.setData({
                    images: images
                  });
                }
              });
              console.log(that.images.length);

              if (that.images.length < 9) {
                that.images.push({
                  avatar: '',
                  isshow: '1',
                  imgurl: ''
                });
              }

              console.log(that.images);
            }
          }

        });
      }
    },

    //预览图片
    yulan(e) {
      var index = e.currentTarget.dataset.index;
      console.log(index, '点击的第几张');
      var that = this,
          imges = [];

      for (let i = 0; i < that.images.length - 1; i++) {
        imges.push(that.images[i].avatar);
      }

      that.setData({
        imgs: imges
      });
      console.log(that.imgs, '图片列表');
      wx.previewImage({
        current: that.imgs[index],
        urls: that.imgs
      });
    },

    //删除图片
    dele(e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      console.log(that.images.length);
      console.log(index);
      that.images.splice(index, 1);
      let image = that.images;
      that.setData({
        images: image
      });
      console.log(that.images);

      if (that.images[that.images.length - 1].isshow != 1) {
        that.images.push({
          avatar: '',
          isshow: 1,
          imgurl: ''
        });
      }
    },

    //提交
    submit() {
      var that = this,
          imges = [];

      for (let i = 0; i < that.images.length - 1; i++) {
        imges.push(that.images[i].avatar);
      }

      that.setData({
        imgs: imges
      });
      console.log(that.imgs, '图片列表');

      if (that.choices == "请选择") {
        wx.showToast({
          title: "请选择退换货类型",
          icon: 'none'
        });
      } else if (that.choice == "请选择" && that.return_type == "2") {
        wx.showToast({
          title: "请选择退款原因",
          icon: 'none'
        });
      } else if (that.explain == '') {
        wx.showToast({
          title: "请输入" + that.shuoming,
          icon: 'none'
        });
      } else {
        app.globalData.request({
          url: api.default.orderRefund,
          data: {
            uid: that.userId,
            order_sn: that.order_sn,
            goods_id: that.tuikuanList.item[0].goods_id,
            take_status: that.take_status,
            return_type: that.return_type,
            reason: that.yyids,
            describe: that.explain,
            imgs: that.imgs,
            money: that.tuikuanList.order_amount
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值

          },
          method: 'POST',
          success: res => {
            console.log(res);

            if (res.status == 1) {
              wx.showToast({
                title: res.msg
              });
              setTimeout(function () {
                wx.navigateBack({
                  delta: 2
                }); // wx.redirectTo({
                //     url: '../../packageC/aftersale/aftersale?order_sn=' + that.data.order_sn + '&userId=' + that.data.userId
                //   })
              }, 1500);
            } else {
              wx.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          }
        });
      }
    },

    explainFun(e) {
      console.log(e.detail.value);
      this.setData({
        explain: e.detail.value
      });
    }

  }
};
</script>
<style>
@import "./replace.css";
</style>